{% extends 'layout.html' %}
{% block css %}
    <style type="text/css">
        .pull-right.pagination-detail {
            display: none;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="mobiledj-container">

        {% if search_group_row_list %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-filter" aria-hidden="true"></i> 快速筛选
                </div>
                <div class="panel-body">
                    <div class="search-group">
                        {% for row in search_group_row_list %}
                            <div class="row">
                                {% for obj in row %}
                                    {{ obj|safe }}
                                {% endfor %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}

        {% if search_list %}
            <div style="float: right;margin: 5px 0;">
                <form method="GET" class="form-inline">
                    <div class="form-group">
                        <input class="form-control" type="text" name="q" value="{{ search_value }}" placeholder="关键字搜索">
                        <button class="btn btn-primary" type="submit">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </button>
                    </div>
                </form>
            </div>
        {% endif %}

        <form method="post">
            {% csrf_token %}

            {% if action_dict %}
                <div style="float: left;margin: 5px 10px 5px 0;">
                    <div class="form-inline">
                        <div class="form-group">
                            <select class="form-control" name="action">
                                <option value="">请选择操作</option>
                                {% for func_name,func_text in action_dict.items %}
                                    <option value="{{ func_name }}">{{ func_text }}</option>
                                {% endfor %}
                            </select>
                            <input class="btn btn-primary" type="submit" value="执行"/>
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if add_btn %}
                <div style="margin: 5px 0;float: left">
                    {{ add_btn|safe }}
                </div>
            {% endif %}

            <table class="table table-bordered table-hover table-striped">
                <thead class="root">
                <tr>
                    {% for item in header_list %}
                        <th>{{ item }}</th>
                    {% endfor %}
                </tr>
                </thead>
                <tbody>
                {% for row in body_list %}
                    <tr>
                        {% for ele in row %}
                            <td>{{ ele }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </form>

        <nav>
            <ul class="pagination">
                {{ pager.page_html|safe }}
            </ul>
            {#            <ul class="pagination">#}
            {#                <li><span>共{{ pager.pager_count }}页，总计: {{ pager.all_count }}条记录</span></li>#}
            {#            </ul>#}
        </nav>
        {% if account_host_list %}
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading"><i class="fa fa-area-chart" aria-hidden="true"></i>子网资源使用统计</div>


                <!-- Table -->
                <table class="table table-bordered table-hover">
                    <theader>
                        <tr>
                            {% for item in account_header_list %}
                                <th>{{ item }}</th>
                            {% endfor %}
                        </tr>
                    </theader>
                    <tbody>
                    {% for row in account_host_list %}
                        <tr>
                            {% for item in row.content %}
                                {% if forloop.last %}
                                    <td>{{ item }}%</td>
                                {% else %}
                                    <td>{{ item }}</td>
                                {% endif %}
                            {% endfor %}
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
        {% for item in account_host_list %}
            <div class="col-md-6 chart-area">
                <div class="panel panel-default">
                    <div class="panel-heading">子网<b>{{ item.subnet }}</b>利用率</div>
                    <div class="panel-body">
                        <div id="{{ forloop.counter }}" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

{% endblock %}
{% block js %}
    <script type="text/javascript">
        $(function () {
            $('.check-all').change(function () {
                $(this).parents('.root').next().find(':checkbox').prop('checked', $(this).prop('checked'));
            })
        });
        {% for item in account_host_list %}
            var myChart = echarts.init(document.getElementById('{{ forloop.counter }}'));
            option = {
                title: {
                    text: '子网{{ item.subnet }}',
                    subtext: '利用率',
                    left: 'center'
                },
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '使用率指标',
                        type: 'gauge',
                        detail: {formatter: '{value}%'},
                        data: [{
                            value: {% for k,v in item.account.items %}{% if forloop.last %}{{ v }}{% endif %}{% endfor %},
                            name: '利用率'
                        }]
                    }
                ]
            };
            myChart.setOption(option);
        {% endfor %}
    </script>
{% endblock %}